<template>
  <div class="mod-home">
    <!-- <div class="home-title">数据统计</div> -->
    <h3 class="home-title">数据统计</h3>
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getExportDispatchList()"
      class="dadeFrom"
    >
      <el-date-picker
        v-model="valuetimes"
        type="daterange"
        :start-placeholder="startTimeString"
        :end-placeholder="endTimeString"
        :default-time="['00:00:00', '23:59:59']"
      >
      </el-date-picker>
      <el-form-item>
        <el-button @click="getpolling()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportExcel()">导出</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        border
        id="out-table"
        :data="tableData"
        style="width: 100%"
        height="300"
        :stripe="true"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column
          fixed
          prop="cityName"
          label="单位"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column prop="dayId" label="日期" width="120" align="center">
        </el-table-column> -->
        <el-table-column
          prop="unProcess"
          label="未处理工单"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="process"
          label="已处理工单"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unCall"
          label="未呼通"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="call"
          label="已呼通"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="self"
          label="本人"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="unSelf"
          label="非本人"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="abnormal"
          label="异常需停机"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="normal"
          label="正常无需处理"
          sortable
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="realUser"
          label="实际停机用户"
          sortable
          width="120"
        >
        </el-table-column>
      </el-table>
      <div class="mod-demo-echarts">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card>
              <div id="J_chartLineBox" class="chart-box" ref="chart"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [],
      cityCode: [],
      cityName: [],
      unProcess: [],
      process: [],
      unCall: [],
      call: [],
      self: [],
      unSelf: [],
      abnormal: [],
      normal: [],
      realUser: [],
      valuetimes: "", //时间段
      startTime: "", //开始时间
      endTime: "", //结束时间
      startTimeString: "",
      endTimeString: "",
      //编辑界面数据
      dataForm: {
        latnId: "",
        serviceNbr: "",
        workHandler: "",
        realServiceNbr: "",
      },
    };
  },
  created() {
    var myDate = new Date();
    const A = myDate.getFullYear() + "";
    const B =
      (myDate.getMonth() + 1 < 10
        ? "0" + (myDate.getMonth() + 1)
        : myDate.getMonth() + 1) + "";
    const C =
      (myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()) + "";
    // const D = C - 1;
    const dateStr = A + "-" + B + "-" + C;
    // const dateStr1 = A + "-" + B + "-" + C;
    this.startTimeString = dateStr;
    this.endTimeString = dateStr;
    this.startTime = dateStr;
    this.endTime = dateStr;
    console.log(this.startTime, " this.startTime1");
    console.log(this.endTime, " this.endTime1");
    this.getStatisticsBill();
    this.initChartLine();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug1
    if (this.chartLine) {
      this.chartLine.resize();
    }
  },
  methods: {
    // 获取数据列表
    getStatisticsBill() {
      let this_ = this;
      console.log(this_.startTime, " this.startTime2");
      console.log(this_.endTime, " this.endTime2");
      console.log("查询");
      this_.dataListLoading = true;
      this_
        .$http({
          url: this_.$http.adornUrl("/disPath/statisticsBill"),
          method: "get",
          params: this_.$http.adornParams({
            startTime: this_.startTime,
            endTime: this_.endTime,
          }),
        })
        .then((res) => {
          this_.tableData = res.data.data;
          var cityCode = [];
          var cityName = [];
          var unProcess = [];
          var process = [];
          var unCall = [];
          var call = [];
          var self = [];
          var unSelf = [];
          var abnormal = [];
          var normal = [];
          var realUser = [];
          //遍历数组，取出数据
          for (var i = 0; i < res.data.data.length; i++) {
            cityCode.push(res.data.data[i].cityCode);
            cityName.push(res.data.data[i].cityName);
            unProcess.push(res.data.data[i].unProcess);
            process.push(res.data.data[i].process);
            unCall.push(res.data.data[i].unCall);
            call.push(res.data.data[i].call);
            self.push(res.data.data[i].self);
            unSelf.push(res.data.data[i].unSelf);
            abnormal.push(res.data.data[i].abnormal);
            normal.push(res.data.data[i].normal);
            realUser.push(res.data.data[i].realUser);
          }
          this_.initChartLine(
            cityName,
            unProcess,
            process,
            unCall,
            call,
            self,
            unSelf,
            abnormal,
            normal,
            realUser
          );
        });
    },
    // 折线图
    initChartLine(
      cityName,
      unProcess,
      process,
      unCall,
      call,
      self,
      unSelf,
      abnormal,
      normal,
      realUser
    ) {
      var option = {
        title: {
          text: "工单数据展示",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "未处理工单",
            "已处理工单",
            "未呼通",
            "已呼通",
            "本人",
            "非本人",
            "异常需停机",
            "正常无需处理",
            "实际停机用户",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: cityName,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "未处理工单",
            type: "line",
            stack: "总量",
            data: unProcess,
          },
          {
            name: "已处理工单",
            type: "line",
            stack: "总量",
            data: process,
          },
          {
            name: "未呼通",
            type: "line",
            stack: "总量",
            data: unCall,
          },
          {
            name: "已呼通",
            type: "line",
            stack: "总量",
            data: call,
          },
          {
            name: "本人",
            type: "line",
            stack: "总量",
            data: self,
          },
          {
            name: "非本人",
            type: "line",
            stack: "总量",
            data: unSelf,
          },
          ,
          {
            name: "异常需停机",
            type: "line",
            stack: "总量",
            data: abnormal,
          },
          ,
          {
            name: "正常无需处理",
            type: "line",
            stack: "总量",
            data: normal,
          },
          ,
          {
            name: "实际停机用户",
            type: "line",
            stack: "总量",
            data: realUser,
          },
        ],
      };
      //增加bar_dv是否为空判断，解决"TypeError: Cannot read property 'getAttribute' of null" 原因是Echarts的图形容器还未生成就对其进行了初始化，
      var bar_dv = this.$refs.chart;
      if (bar_dv) {
        this.chartLine = echarts.init(this.$refs.chart);
        this.chartLine.setOption(option);
      } else {
        console.log("bar_dv为空!");
      }

      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    /**
     * @function 时间戳转化为年月日
     * @param {string} date
     * @returns {number} 时间戳
     * @author 天心天地生 2020-1-14
     * */
    transformTimestamp(result) {
      const date = new Date(result);
      const Y = date.getFullYear() + "";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
      // const h = date.getHours() + ":";
      // const m = date.getMinutes();
      // const s = date.getSeconds(); // 秒
      const dateString = Y + "-" + M + "-" + D;
      console.log("dateString", dateString); // > dateString 20200110
      return dateString;
    },
    //查询按钮
    getpolling() {
      if (!this.valuetimes == "") {
        var time1 = new Date(this.valuetimes[0]).getTime();
        var time2 = new Date(this.valuetimes[1]).getTime();
        const start = this.transformTimestamp(time1);
        const end = this.transformTimestamp(time2);
        this.startTime = start;
        this.endTime = end;
        this.getStatisticsBill();
      } else {
        var myDate = new Date();
        const Y = myDate.getFullYear() + "";
        const M =
          (myDate.getMonth() + 1 < 10
            ? "0" + (myDate.getMonth() + 1)
            : myDate.getMonth() + 1) + "";
        const C =
          (myDate.getDate() - 1 < 10
            ? "0" + myDate.getDate()
            : myDate.getDate()) + "";
        // const D = C - 1;
        const dateString = Y + "-" + M + "-" + C;
        // const dateString1 = Y + "-" + M + "-" + C;
        this.startTime = dateString;
        this.endTime = dateString;
        console.log(this.startTime, " this.startTime");
        console.log(this.endTime, " this.endTime");
        // const dateStr = Y + M + D;
        // const dateStr1 = Y + M + C;
        // this.startTime = "";
        // this.endTime = "";
        // this.startTimeString = dateStr;
        // this.endTimeString = dateStr1;
        this.getStatisticsBill();
      }
    },
    //导出Excel
    exportExcel() {
      console.log("导出excel");
      let fix = document.querySelector(".el-table__fixed");
      console.log(fix, "fix");
      let wb;
      if (fix) {
        //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = XLSX.utils.table_to_book(
          document.querySelector("#out-table").removeChild(fix)
        );
        document.querySelector("#out-table").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      }
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "导出excel.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
};
</script>

<style lang="scss" scoped>
.mod-home {
  line-height: 1.5;
}
.mod-demo-echarts {
  margin-top: 50px;
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
.home-title {
  width: 20%;
  float: left;
  margin-top: 0;
}
.dadeFrom {
  width: 50%;
  float: right;
}
</style>

